<template>
    <div class="bottom_nav_container">
        <div class="home" @click="onClickTab(0)" :class="homeClass">首页</div>
        <div class="archive" @click="onClickTab(1)" :class="archiveClass">健康档案</div>
        <div class="personal" @click="onClickTab(2)" :class="personalClass">个人中心</div>
    </div>
</template>

<script setup>
    import { reactive } from 'vue';
    let emit = defineEmits(["clickTab"])
    let homeClass = reactive({ active: true, normal: false })
    let archiveClass = reactive({ active: false, normal: true })
    let personalClass = reactive({ active: false, normal: true })
    const active = {
        active: true,
        normal: false
    }
    const normal = {
        active: false,
        normal: true
    }

    function onClickTab(tabIndex) {
        emit("clickTab", tabIndex, onTabChanged)
    }

    function onTabChanged(tabIndex) {
        switch (tabIndex) {
            case 0:
                Object.assign(homeClass, active)
                Object.assign(archiveClass, normal)
                Object.assign(personalClass, normal)
                break;
            case 1:
                Object.assign(homeClass, normal)
                Object.assign(archiveClass, active)
                Object.assign(personalClass, normal)
                break;
            case 2:
                Object.assign(homeClass, normal)
                Object.assign(archiveClass, normal)
                Object.assign(personalClass, active)
                break;
            default:
                Object.assign(homeClass, active)
                Object.assign(archiveClass, normal)
                Object.assign(personalClass, normal)
                break;
        }
    }
</script>

<style scoped>
    .bottom_nav_container {
        display: flex;
        flex-direction: row;
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        border-width: 2px;
        border-color: gray;
        border-style: solid;
        padding: 10px;
    }

    .home,
    .archive,
    .personal {
        width: 25%;
        text-align: center;
        font-size: 24px;
        color: black;
        font-weight: bolder;
        cursor: pointer;
    }

    .active {
        background-color: blueviolet;
        color: white;
        border-radius: 3px;
        padding: 3px 8px;
    }

    .normal {
        background-color: gray;
        color: black;
        border-radius: 3px;
        padding: 3px 8px;
    }
</style>